<template>
  <div class="header">
    <el-input
      class="input"
      type="text"
      placeholder="keyword"
      v-model="searchForm.keyword"
    />
    <el-button class="search" @click="search">Search</el-button>
    <el-upload
      ref="uploadRef"
      class="upload-demo"
      :action="uploadUrl"
      :headers="headerObj"
      :show-file-list="false"
      :auto-upload="true"
      :on-success="importSuccess"
      :limit="1"
      :file-list="fileList"
    >
      <template #trigger>
        <el-button style="width: 140px" type="primary">{{
          t(`module.table.ImportDevices`)
        }}</el-button>
      </template>
    </el-upload>
  </div>
  <div class="data_box">
    <el-table :data="deviceList" height="480" style="width: 100%" class="table">
      <el-table-column prop="sn" label="SN" width="280" />
      <el-table-column
        prop="organization_name"
        label="Organization"
        width="280"
      />
      <el-table-column prop="status" label="Online" width="280">
        <template #default="scope">
          <el-tag
            :type="scope.row.status === -1 ? '' : 'success'"
            disable-transitions
            >{{ scope.row.status === -1 ? "offline" : "online" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="Manage" width="280">
        <template #default="scope">
          <el-button
            v-if="scope.row.organization_id !== 0"
            type="warning"
            @click="unbind(scope.row.id)"
            >unbind</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="table"
      layout="prev, pager, next"
      @current-change="toPage"
      :total="total"
      :size="10"
      :current-page="searchForm.page"
    />
  </div>
</template>

<script>
import API from "api";
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

export default {
  setup() {
    let state = reactive({
      deviceList: [],
      uploadUrl: "https://smart-api.change90.com/api/device/producer/import",
      headerObj: {
        userid: 0,
        token: "",
      },
      fileList: [],
      searchForm: {
        page: 1,
        status: 0,
        keyword: "",
      },
      // 表头字段
      haderList: [
        {
          label: "SN",
          field: "sn",
        },
        {
          label: "Online/Offline",
          field: "status",
        },
      ],
      total: 0,
    });
    const { t } = useI18n();
    onMounted(() => {
      state.headerObj.userid = window.localStorage.getItem("user_id") || 0;
      state.headerObj.token = window.localStorage.getItem("auth_token") || "";
      getDeviceList();
    });
    const importSuccess = () => {
      ElMessage.success("Success");
      state.fileList = [];
      state.searchForm.page = 1;
      state.searchForm.keyword = "";
      getDeviceList();
    };
    const getDeviceList = () => {
      API.deviceList(state.searchForm).then((res) => {
        if (res.code === 403) {
          window.location.href = "/produceLogin";
        }
        state.deviceList = res.data.list;
        state.total = res.data.total;
      });
    };
    const importDevice = () => {
      API.deviceList(state.searchForm).then((res) => {
        state.deviceList = res.data.list;
        state.total = res.data.total;
      });
    };
    const toPage = (page) => {
      state.searchForm.page = page;
      getDeviceList();
    };
    const search = () => {
      state.searchForm.page = 1;
      getDeviceList();
    };
    const unbind = (id) => {
      API.producerUnbind({ id: id }).then((res) => {
        ElMessage.success("unbind success");
        getDeviceList();
      });
    };
    return {
      t,
      search,
      toPage,
      unbind,
      importDevice,
      importSuccess,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
  .input {
    width: 400px;
  }
  .search {
    margin-left: 50px;
    margin-right: 50px;
  }
}
.table {
  display: flex;
  justify-content: center;
}
:deep(.el-form) {
  padding: 10px;
}
:deep(.el-col) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
:deep(.el-checkbox) {
  box-sizing: border-box;
  height: 46px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
}
.filter_box {
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 90%;
  margin: 0 auto !important;
  padding-bottom: 20px;
}
.flex_start {
  flex-wrap: nowrap;
}

.btn_box {
  margin: 0 10px;
}
.condition {
  margin-top: 4vh;
}

.card-1 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #a490c3 0%, #8388c2 100%);
  border-radius: 5px;
}

.card-2 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #77b2d2 0%, #56bca8 100%);
  border-radius: 5px;
}

.card-3 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #d96392 0%, #dc687d 100%);
  border-radius: 5px;
}

.card-4 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #ff7e6d 0%, #f15b25 100%);
  border-radius: 5px;
}

.card-5 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #6082d7 0%, #67a6ba 100%);
  border-radius: 5px;
}

.mt-20 {
  margin-top: 20px;
}

.data_table {
  box-sizing: border-box;
  position: relative;
  border-radius: 20px;
  border: 1px solid #9c9c9c;
  margin: 0 20px;
  overflow-x: scroll;
  height: 50vh;
  background-color: #fff;

  .row {
    width: fit-content;
  }
  .header {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    font-size: 18px;
    line-height: 55px;
    text-align: center;
    color: #333;
    background-color: #fff;
    z-index: 10;

    .font {
      background-color: #fff;
      display: block;
    }
  }
  .data_list {
    min-height: 46px;
    font-size: 14px;
    color: #000;
    line-height: 1;
    text-align: center;
  }
  .child_list {
    padding: 10px 0;
    transform: all 99s;
    align-items: flex-end;
    font-size: 14px;
    text-align: center;
    & > div {
      min-height: 40px;
      line-height: 1;
      border-bottom: 1px solid #9c9c9c;
    }
  }
  .ml_40 {
    margin-left: 40px;
  }
  .width_40 {
    flex: 0 0 40px;
    width: 40px;
  }
  .width_170 {
    flex: 0 0 170px;
    width: 170px;
  }
  .width_200 {
    flex: 0 0 200px;
    width: 200px;
  }
  .width_320 {
    flex: 0 0 320px;
    width: 320px;
  }

  .flex_end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .sn {
    width: 140px;
    text-align: center;
  }

  .el-icon {
    cursor: pointer;
  }
}
</style>
